<script setup lang="ts">
import { CirclePlus } from "@element-plus/icons-vue"
import CreateOrUpdate from "@/views/resource/components/game/game-config/create-or-update.vue"
import { FormTypeEnum } from "@/constants/other-keys"
import { ref } from "vue"
import { SourceTableData } from "@/api/resources/source/types/source"
import { getSourceOptionsApi } from "@/api/resources/source"

interface Props {
  byId: undefined | string | null
}
defineProps<Props>()
const emit = defineEmits(["update:byId"])
const loading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const dialogType = ref<FormTypeEnum>(FormTypeEnum.CREATE)
const editDialogRef = ref()
const curId = ref<string>()
const selectId = ref<string>("")

//#region 详情
const handleView = (row: SourceTableData) => {
  curId.value = row.raw_data_id
  dialogType.value = FormTypeEnum.VIEW
  dialogVisible.value = true
}
//#endregion
//#region 增
const handleCreate = () => {
  curId.value = undefined
  dialogType.value = FormTypeEnum.CREATE
  dialogVisible.value = true
}
//#endregion

//#region 查
const tableData = ref<SourceTableData[]>([])
const getTableData = () => {
  loading.value = true
  getSourceOptionsApi()
    .then(({ data }) => {
      tableData.value = data
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
getTableData()
//#endregion

const closeDialog = (param: string | undefined) => {
  dialogVisible.value = false
  if (param && param == "refresh") getTableData()
}

const handleSelect = (param: string) => {
  selectId.value = param
  emit("update:byId", param)
}

const getById = () => {
  return selectId.value
}

defineExpose({ getById })
</script>

<template>
  <div class="toolbar-wrapper">
    <div>
      <el-button type="primary" :icon="CirclePlus" @click="handleCreate">数据上传</el-button>
    </div>
  </div>
  <el-row v-loading="loading" shadow="never" :gutter="20">
    <el-radio-group v-model="selectId">
      <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="5" v-for="(item, index) in tableData" :key="index">
        <el-card class="card-item" body-class="card-item body" @click="handleSelect(item.raw_data_id)">
          <template #header>
            <div class="card-header flex-between">
              <el-space class="flex-vc">
                <el-radio :value="item.raw_data_id" />
                <el-icon :size="16"><Calendar /></el-icon>
                <el-text>{{ item.create_time }}</el-text>
              </el-space>
            </div>
          </template>
          <div class="card-body">
            <div class="flex-between relation">
              <el-space class="flex-vc">
                <el-text size="large" class="w-150px mb-2" truncated>
                  {{ item.raw_data_name }}
                </el-text>
              </el-space>
              <el-space class="flex-vc card-operate">
                <el-link :underline="false" @click="handleView(item)">
                  <el-icon :size="18"><View /></el-icon>
                </el-link>
              </el-space>
            </div>
            <p class="describe">
              <el-text type="info" line-clamp="2">
                {{ item.raw_data_describe }}
              </el-text>
            </p>
          </div>
          <template #footer>
            <div class="card-footer flex-between">
              <el-space class="flex-vc">
                <el-icon><UserFilled /></el-icon>
                <el-text>{{ item.create_user.user_name }}</el-text>
              </el-space>
              <el-tag type="info" effect="plain">{{ item.create_user.user_position }}</el-tag>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-radio-group>
  </el-row>

  <CreateOrUpdate
    ref="editDialogRef"
    :id="curId"
    :dialog-type="dialogType"
    :visible="dialogVisible"
    @closeDialog="closeDialog"
  />
</template>
<style lang="scss" scoped>
@import "@/styles/custom.scss";
.el-radio-group {
  width: 100%;
}
.el-radio {
  height: auto;
}
:deep(.el-radio__inner) {
  background-color: white;
}
.el-card {
  cursor: pointer;
}
</style>
